<template>
  <div>
    <div style="margin: 10px 0">
      <el-carousel height="450px" :interval="10000">
        <!--        轮播图-->
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item" alt="" style="width: 100%">
        </el-carousel-item>
      </el-carousel>
    </div>

<!--    统计学生时长功能-->
    <Pomodoro theme="light" minutes="60" pomodoro-label="请点击我开始今天的学习吧！" start-label="开始"pause-label="暂停" reset-label="重置" muted="true"/>

    <div style="margin: 10px 0">
      <el-row :gutter="10">
        <el-col :span="4" v-for="item in files" :key="item.id" style="margin-bottom: 10px">
          <div style="border: 1px solid #ccc; padding-bottom: 10px">
            <img :src="item.url" alt="" style="width: 100%">
            <div style="color: #7865; padding: 10px">{{ item.name }}</div>
            <div style="padding: 10px"><el-button type="primary">文件预览</el-button></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Pomodoro from 'vuemodoro';
export default {
  name: "FrontHome",
  components: {
    Pomodoro,
  },
  data() {
    return {
      imgs: [
        'http://rrho4hya3.hd-bkt.clouddn.com/ahu1.png',
        'http://rrho4hya3.hd-bkt.clouddn.com/ahu3.png'],
      files: []
    }
  },
  created() {
    this.request.get("/echarts/file/front/all").then(res => {
      console.log(res.data)
      // 展示图片格式的文件
      this.files = res.data.filter(v => v.type === 'png' || v.type === 'jpg' || v.type === 'webp')
    })
  },
  methods: {

  }
}
</script>

<style>

</style>